<template>
  <view class="cardstyle" :style="{'background-color': bgColor}">
    <view class="titlebox">
      <view class="imgbox" v-if="mode === 2">
        <image 
          :src="showImage" 
          class="single-img" 
          mode="aspectFill"
          @error="handleImageException"
        ></image>
      </view>
      <view class="title-content">
        <text 
          :class="{ 'ad-title': mode === 3, 'normal-title': mode !== 3 }"
        >
          {{ title }}
        </text>
      </view>
    </view>
    <view class="content-area" v-if="content && mode !== 3">
      <text class="content-text">{{ content }}</text>
    </view>

    <view class="adbox" v-if="mode === 3">
      <view v-for="(item, index) in validImages" :key="index" class="ad-img-item">
        <image 
          :src="item" 
          class="ad-img" 
          mode="aspectFill"
          @error="handleImageError(index)"
        ></image>
      </view>
    </view>

    <view class="tipsbox">
      <text class="top-tag" v-if="isTop">置顶</text>
      <text class="ad-tag" v-if="mode === 3">广告</text>
      <text class="author" :style="authorColor">{{ author }}</text>
      <text class="comments" v-if="mode !== 3 && comments > 0">{{ comments }}评</text>
      <text class="time">{{ time }}</text>
    </view>

    <slot name="tips" v-if="showSearch"></slot>
  </view>
</template>

<script>
export default {
  name: "NewsCardView",
  description: "新闻卡片组件，支持无图、单图、多图广告三种模式",
  data() {
    return {
      defaultPic: "/static/default-image.png", 
      failPic: "/static/fail-image.png",    
      imageError: false, 
      status: "news"    
    };
  },
  computed: {
    showImage() {
      if (this.mode === 2) {
        const hasImage = this.images && this.images.length > 0;
        return this.imageError ? this.failPic : (hasImage ? this.images[0] : this.defaultPic);
      }
      return "";
    },
    validImages() {
      if (this.mode === 3 && this.images && this.images.length) {
        return this.images.slice(0, 3); 
      }
      return [];
    },
    authorColor() {
      const colorMap = {
        news: "#aaa",
        ad: "#00f"
      };
      return { color: colorMap[this.status] || "#666" };
    }
  },
  props: {
    nid: {
      type: String,
      default: "000",
      required: true,
      description: "新闻唯一标识"
    },
    title: {
      type: String,
      default: "新闻标题",
      required: true,
      description: "新闻标题文本"
    },
    mode: {
      type: Number,
      default: 1,
      required: true,
      validator: (val) => [1, 2, 3].includes(val),
      description: "显示模式：1=无图，2=单图，3=多图广告"
    },
    isTop: {
      type: Boolean,
      default: false,
      required: true,
      description: "是否置顶"
    },
    author: {
      type: String,
      default: "来源",
      required: true,
      description: "作者/来源名称"
    },
    comments: {
      type: Number,
      default: 0,
      required: true,
      description: "评论数量"
    },
    time: {
      type: String,
      default: "2025.1.1",
      description: "发布时间"
    },
    images: {
      type: Array,
      default: () => [],
      description: "图片数组（单图用[0]，多图最多3张）"
    },
    content: {
      type: String,
      default: "",
      required: false,
      description: "新闻正文内容（非广告模式显示）"
    },
    showSearch: {
      type: Boolean,
      default: false,
      description: "是否显示搜索提示插槽"
    },
    bgColor: {
      type: String,
      default: "#fff",
      description: "卡片背景色"
    }
  },
  mounted() {
    if (this.mode === 3) {
      this.status = "ad";
    }
  },
  methods: {
    handleImageException() {
      if (!this.imageError) {
        this.imageError = true;
        console.warn(`[NewsCard] 单图加载失败：${this.title}`);
      }
    },
    handleImageError(index) {
      if (this.validImages[index] !== this.failPic) {
        this.$set(this.images, index, this.failPic);
        console.warn(`[NewsCard] 多图[${index}]加载失败：${this.title}`);
      }
    }
  }
};
</script>

<style scoped>
.cardstyle {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  width: 100%;
}
.titlebox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20rpx;
}
.imgbox {
  flex-shrink: 0; 
}
.single-img {
  width: 220rpx;
  height: 160rpx;
  border-radius: 12rpx;
}
.title-content {
  flex: 1;
}
.normal-title {
  font-size: 34rpx;
  line-height: 48rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-title {
  font-size: 32rpx;
  line-height: 46rpx;
  color: #aaa;
  display: -webkit-box;
  -webkit-line-clamp: 1; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-area {
  padding: 0 20rpx;
  margin-top: 15rpx;
}
.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 42rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.adbox {
  display: flex;
  gap: 12rpx;
  margin-top: 16rpx;
  padding: 0 20rpx;
}
.ad-img-item {
  flex: 1;
}
.ad-img {
  width: 100%;
  height: 180rpx;
  border-radius: 12rpx;
}
.tipsbox {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: 20rpx;
  flex-wrap: wrap;
  padding: 0 20rpx;
}
.top-tag {
  font-size: 24rpx;
  color: #f00;
  padding: 2rpx 12rpx;
  background: #fff0f0;
  border-radius: 4rpx;
}
.ad-tag {
  font-size: 24rpx;
  color: #00f;
  padding: 2rpx 12rpx;
  background: #f0f7ff;
  border-radius: 4rpx;
}
.author {
  font-size: 26rpx;
}
.comments {
  font-size: 26rpx;
  color: #aaa;
}
.time {
  font-size: 26rpx;
  color: #aaa;
  margin-left: auto;
}
</style>